<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" class='breadlink'>
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 输入框 -->
  <el-row :gutter="20">
    <el-col :span="8">
      <el-input placeholder="请输入搜索内容" v-model="searchText" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click='btnSearch'></el-button>
      </el-input>
    </el-col>
    <el-col :span="4">
      <el-button plain type="success" @click='addUser'>添加用户</el-button>
    </el-col>
  </el-row>
  <!-- 表格 -->
  <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="username"
    label="姓名"
    width="180">
  </el-table-column>
  <el-table-column
    prop="email"
    label="邮箱"
    width="180">
  </el-table-column>
  <el-table-column
    prop="mobile"
    label="电话">
  </el-table-column>
  <el-table-column
    prop="mg_state"
    label="用户状态">
    <template slot-scope="scope">
        <!-- change**switch 状态发生变化时的回调函数,新状态的值 -->
      <el-switch v-model="scope.row.mg_state" @change='changSwitch(scope.row)'>
      </el-switch>
    </template>

  </el-table-column>
  <el-table-column
    label="操作">
    <template slot-scope="scope">
      <el-button size="mini" plain type="primary" icon="el-icon-edit" @click='showEditDialog(scope.row)'></el-button>
      <el-button size="mini" plain type="danger" icon="el-icon-delete" @click='delUser(scope.row.id)'></el-button>
      <el-button size="mini" plain type="success" icon="el-icon-check" @click='showAssignUserDialog(scope.row)'>分配角色</el-button>
    </template>
  </el-table-column>
</el-table>
<!-- 分页 -->
<!-- current-change,currentPage 改变时会触发,当前页 -->
<el-pagination

@current-change='currentChange'
  :page-size='pagesize'
  background
  layout="prev, pager, next"
  :total="total">
</el-pagination>

<!-- 添加中的对话框 -->
<el-dialog title="添加用户" :visible.sync="dialogFormVisible">
  <el-form :model="addForm" ref='addFormRef' :rules='rules'>
    <el-form-item label="用户名" prop='username'>
      <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop='password'>
      <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop='email'>
      <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop='mobile'>
      <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click='submitAddForm'>确 定</el-button>
  </div>
</el-dialog>
<!-- 编辑中的对话框 -->
<el-dialog title="编辑用户" :visible.sync="dialogFormEditVisible">
  <el-form :model="editForm">
    <el-form-item label="用户名" prop='username'>
      <el-tag type="info">{{editForm.username}}</el-tag>
    </el-form-item>
    <el-form-item label="邮箱" prop='email'>
      <el-input v-model="editForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop='mobile'>
      <el-input v-model="editForm.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </div>
</el-dialog>
<!-- 分配角色对话框 -->
<el-dialog title="分配角色" :visible.sync="isShowAssignUserDialog">
  <el-form :model="assginRolesForm" label-width='80px'>
    <el-form-item label="用户名">
      <el-tag type="info">{{assginRolesForm.username}}</el-tag>
    </el-form-item>
    <el-form-item label="角色列表">
      <el-select v-model="assginRolesForm.rid" placeholder="请选择活动区域">
        <el-option v-for='item in getList' :key="item.id" label="item.role_name" value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isShowAssignUserDialog = false">取 消</el-button>
    <el-button type="primary" @click="isShowAssignUserDialog = false">确 定</el-button>
  </div>
</el-dialog>
</div>
